<script setup>
defineProps({
  list: {
    type: Array,
    default: () => []
  }
})

function handleClick(link) {
  navigateTo(link)
}
</script>

<template>
  <div>
    <ul class="nav-warp">
      <li v-for="item in list" :key="item.name" class="nav-item" :style="{ background: item.bgColor }" @click="handleClick(item.link)">
        <img class="nav-img w-284px h-148px mb-20px" :src="`/images/nav/${item.imgUrl}.png`" :alt="item.name" />
        <div class="font-bold mb-8px">{{ item.name }}</div>
        <div class="text-font-12px text-hex-777">{{ item.text }}</div>
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.nav-warp {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0 0 0;
  justify-content: space-between;
  .nav-item {
    margin: 0 10px 20px 0;
    border-radius: 8px;
    color: #111111;
    line-height: normal;
    cursor: pointer;
    transition: 0.4s;
    &:nth-child(4n) {
      margin: 0 0 20px 0;
    }
    .nav-img {
      border-radius: 8px;
      transform: scale(1);
      &:hover {
        transform: scale(1.05);
        transition: 0.4s;
      }
    }
  }
}
</style>
